<template>
    <div class="liveTabContainer">
        <h3 style="padding: 3px;">菜单内容编辑</h3>
        <Row >
            <Col span="24" class="tab-container" style="padding:16px;">
                <!--<Tabs type="card">
                    <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" >
                        <div id="area">

                        </div>
                    </TabPane>
                    &lt;!&ndash;<TabPane label="标签二">标签二的内容</TabPane>
                    <TabPane label="标签三">标签三的内容</TabPane>&ndash;&gt;
                    <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra" >增加</Button>
                </Tabs>-->
            <el-tabs v-model="activeTab" type="card" addable  @tab-click="tabClick" @edit="handleTabsEdit">
                <!--<el-tab-pane label="聊天室" name="chat">
                    <div >
                        聊天室面板
                    </div>
                </el-tab-pane>-->
                <el-tab-pane label="直播间介绍" name="introduce" :closable="false">
                    <div >
                    </div>
                </el-tab-pane>
                <el-tab-pane
                        closable
                        :key="tab.liveRoomTabId"
                        v-for="tab in liveTabs"
                        :label="tab.tabName"
                        :name="tab.liveRoomTabId + ''"
                >
                </el-tab-pane>
                <div  id="editor">

                </div>
            </el-tabs>
            </Col>
            <Col span="4" offset="10">
                <Button type="success" long style="text-align: center" :loading="updateLoading" @click="updateMenu">保存该菜单内容</Button>
            </Col>
        </Row>

        <!--增加菜单对话框-->
        <Modal
                v-model="addMenuModel"
                title="添加菜单"
                :loading="addMenuModelLoading"
                @on-ok="submitMenu">
            <Input v-model="liveTabToAdd" placeholder="请输入菜单名称"></Input>
        </Modal>
    </div>
</template>
<script>
    import E from 'wangeditor'
    import { ElButton, elSelect,  } from 'element-ui'
    import {getQiNiuToken, addLiveRoomTab, getLiveRoomTabs, getOneLiveInfoById, updateLiveRoomTab,
        updateLiveRoomDesc, deleteLiveRoomTab} from '../../api/api'
    import { editorConfig } from '../../utils/wangEditorConfig'
    export default {
        components:{
            ElButton,
            elSelect
        },
        data () {
            return {
                updateLoading:false,
                orgId:this.$store.state.orgId,
                liveRoomId:this.$store.state.operatedLiveRoomId,
                addMenuModel:false,
                addMenuModelLoading:true,
                liveTabToAdd:'',
                liveTabs:[
                ],
                activeTab: 'introduce',
                activeTabIndex: 0,
                activeTabContent:'',
                editor:null,
                liveRoomIntroduce:'',

            }
        },
        methods: {
            updateMenu(){
                this.updateLoading = true
                if (this.activeTab == 'introduce'){
                    //更新直播间简介，与更新菜单不同
                    let roomDesc = {
                        liveRoomId: this.liveRoomId,
                        eventDesc: this.activeTabContent
                    }
                    updateLiveRoomDesc(roomDesc).then(res =>{
                        if (res.code == 0){
                            this.$Message.success('更新成功！');
                            this.updateLoading = false
                        }
                    }).catch(res =>{
                        this.updateLoading = false
                    })
                }else {
                    //更新菜单
                    this.liveTabs[this.activeTabIndex].tabContent = this.activeTabContent
                    updateLiveRoomTab(this.liveTabs[this.activeTabIndex]).then(res =>{
                        if (res.code == 0){
                            this.$Message.success('更新成功！');
                            this.updateLoading = false
                        }
                    }).catch(res =>{
                        this.updateLoading = false
                    })
                }
            },
            submitMenu(){
                let tabInfo = {
                    liveRoomId: this.liveRoomId,
                    tabName: this.liveTabToAdd,
                    tabContent: ''
                }
                addLiveRoomTab(tabInfo).then(res =>{
                    if (res.code == 0 ){
                        this.addMenuModel = false
                        this.liveTabs.push({
                            liveRoomTabId: res.liveTab.liveRoomTabId,
                            tabName: res.liveTab.tabName,
                            tabContent: res.liveTab.tabContent,
                            liveRoomId: this.liveRoomId
                        });
                        this.activeTab = res.liveTab.liveRoomTabId + '';
                        this.editor.txt.html(res.liveTab.tabContent)
                    }
                })
            },
            tabClick(tab){
                this.activeTabIndex = tab.index - 1
                if (tab.name == 'introduce'){
                    this.editor.txt.html(this.liveRoomIntroduce)
                }else {
                    this.editor.txt.html(this.liveTabs[tab.index - 1].tabContent)
                }
            },
            handleTabsEdit(targetName, action) {
                if (action === 'add') {
                    this.addMenuModel = true
                }
                if (action === 'remove') {
                    this.$Modal.confirm({
                        title: '删除菜单',
                        content: '<p>菜单删除后不可恢复,确定要删除吗?</p>',
                        onOk: () => {
                            let tabs = this.liveTabs;

                            if (this.activeTab == targetName) {
                                tabs.forEach((tab, index) =>{
                                    if (tab.liveRoomTabId == targetName) {
                                        let nextTab = tabs[index + 1] || tabs[index - 1];
                                        if (nextTab) {
                                            this.activeTab = nextTab.liveRoomTabId + '';
                                        }
                                    }
                                })
                            }
                            //删除该菜单
                            let params ={
                                liveroom_tab_id: targetName
                            }
                            deleteLiveRoomTab(params).then((res) =>{
                                if (res.code == 0){
                                    this.liveTabs = tabs.filter(tab => tab.liveRoomTabId+'' != targetName);
                                }
                            }).catch(res =>{

                            })
                        },
                        onCancel: () => {

                        }
                    });



                }
            }
        },
        mounted(){
            //获取直播间菜单列表
            getLiveRoomTabs(this.liveRoomId).then(res => {
                this.liveTabs = res.menus
            })

            this.editor = new E('#editor')
            this.editor.customConfig.onchange = (html) => {
                this.activeTabContent = html
            }
            editorConfig(this.editor)
            //获取直播间信息，更新
            getOneLiveInfoById(this.liveRoomId).then(response =>{
                this.liveRoomIntroduce = response.liveRoom.eventDesc
                this.editor.txt.html(this.liveRoomIntroduce)
            })

        }
    }
</script>
<style scoped>
    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
        height: 120px;
        margin-top: -16px;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        padding: 16px;
    }

    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        border-color: transparent;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
        border-color: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 1px solid #3399ff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>